<template>
    <div class="table">
        <!-- title -->
         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>项目管理-项目分类维护</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格主体 -->
        <div class="container">
            <!-- title -->
            <div class="handle-box"> 
                <p style="line-height:35px;">分类列表</p>
                 <el-button type="primary" @click="addFirstClassify"><i class="el-icon-circle-plus el-icon--left"></i>新增一级类目</el-button>
                <el-button type="primary" @click="showFirstClassify"><i class="el-icon-circle-plus el-icon--left"></i>编辑一级类目</el-button>
                <el-button type="primary" @click="delFirstClassifyBtn"><i class="el-icon-circle-plus el-icon--left"></i>删除一级类目</el-button>
                <el-button type="primary" @click="showSecondClassify"><i class="el-icon-circle-plus el-icon--left"></i>新增二级类目</el-button>
            </div>
            <!-- 表格主体 -->
            <el-table :data="tableData" border style="width: 100%" >
             
                <el-table-column prop="pName" label="一级分类名称"  align="center"></el-table-column>
                <el-table-column prop="name" label="二级分类名称" align="center"></el-table-column>                
                <el-table-column label="操作"  align="center" width="250">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleLook(scope.$index, scope.row)">编辑二级类目</el-button>
                        <el-button class="del" size="small" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height:200px;"></div>
            <!-- 分页按钮 -->
            <div class="pagination" v-show="totalPages>1">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements">
                </el-pagination>
            </div>
            <!-- 新增一级分类提示框 -->
            <el-dialog title="新增一级项目分类" :visible.sync="addVisible" width="600px" center >
                <!-- 新增分类操作区 -->
                <el-form ref="form" label-width="125px">
                    
                    <el-form-item label="分类名称：">
                        <el-input v-model="level1Name" placeholder="请输分类名称：" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="分类别名：">
                        <el-input v-model="Level1Alias" placeholder="请输入分类别名：" style="width:400px"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 提示框操作区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddFirstSubmitClassify">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 编辑一级分类提示框 -->
            <el-dialog title="修改一级项目分类" :visible.sync="new1Visible" width="600px" center >
                <!-- 新增分类操作区 -->
                <el-form ref="form" label-width="125px">
                    <el-form-item label="修改选项：">
                        <el-select v-model="firstValue" placeholder="请选择">
                            <el-option
                                v-for="item in parentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称：">
                        <el-input v-model="level1Name" placeholder="请输分类名称：" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="分类别名：">
                        <el-input v-model="Level1Alias" placeholder="请输入分类别名：" style="width:400px"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 提示框操作区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="new1Visible = false">取 消</el-button>
                    <el-button type="primary" @click="editFirstClassify">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 删除一级分类提示框 -->
            <el-dialog title="删除一级项目分类" :visible.sync="delFirstClassify" width="600px" center >
                <!-- 删除分类操作区 -->
                <el-form ref="form" label-width="125px">
                    <el-form-item label="一级分类名称：">
                        <el-select v-model="firstValue" placeholder="请选择">
                            <el-option
                                v-for="item in parentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <!-- 提示框操作区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delFirstClassify = false">取 消</el-button>
                    <el-button type="primary" @click="delFirstSubmitClassify">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 新增二级分类提示框 -->
            <el-dialog title="新增二级项目分类" :visible.sync="new2Visible" width="600px" center >
                <!-- 新增分类操作区 -->
                <el-form ref="form" label-width="125px">
                    <el-form-item label="所属一级分类：">
                        <el-select v-model="secondValue" placeholder="请选择">
                            <el-option
                                v-for="item in parentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二级分类名称：">
                        <el-input v-model="level2Name" placeholder="请输人二级分类名称" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="二级分类别名：">
                        <el-input v-model="Level2Alias" placeholder="请输入二级分类别名：" style="width:400px"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 提示框操作区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="new2Visible = false">取 消</el-button>
                    <el-button type="primary" @click="NewSecondClassify">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 修改二级分类提示 -->
            <el-dialog title="修改二级分类" :visible.sync="subVisible" width="600px" center >
                <el-form ref="form" label-width="150px">
                    <el-form-item label="所属一级分类：">
                        <el-select v-model="secondValue" placeholder="请选择">
                            <el-option
                                v-for="item in parentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二级分类名称：">
                        <el-input v-model="level2Name" placeholder="请输人二级分类名称" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="二级分类别名：">
                        <el-input v-model="Level2Alias" placeholder="请输入二级分类别名：" style="width:400px"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 提示框操作区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="subVisible = false">取 消</el-button>
                    <el-button type="primary" @click="EditSecondClassify">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 删除提示框 -->
            <el-dialog title="提示" :visible.sync="delVisible" width="400px" center >
                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>    
</template>
<script>
export default {
    name:"projectClassify" ,
    data(){
        return{
            pageIndex:1,//当前页码
            pageSize:99999,//每页10条
            totalPages:1,//默认的总页数
            totalElements:1,//默认的总条数
            prantArray:[], //记录一级分类
            childData:[],//记录二级数据
            tableData:[],//表格数据
            delVisible:false, //删除确认提示，默认隐藏
            parentId:0,//新建分类父级ID,默认为0代表自身一级
            childId:0,//二级分类id
            addVisible:false, //新增一级分类
            new1Visible:false,//编辑一级项目分类提示
            delFirstClassify:false,//删除一级分类
            new2Visible:false,//新增二级级项目分类提示
            subVisible:false,//编辑二级项目分类提示
            level1Name:'',//一级分类名称
            Level1Alias:'',//一级分类别名
            level2Name:'',//二级分类名称
            Level2Alias:'',//二级分类别名   
            parentOptions:[],//父级类别待选项
            childOptions:[],//子级类别待选项
            firstValue:'',//修改一级数据
            secondValue:'',//新增（修改）二级数据
        }
    },
    mounted(){
        this. getListData();
    },
    methods:{

        //获取分类类别data数据
        getListData(){
            this.$axios
                .get('/manage/item/categoryList', {
                    params: {
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize
                    }
                 })
                .then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        this.totalPages = response.data.totalPages;
                        var data = response.data.data;

                        var parentOptions = [];
                        var prantArray =[];
                        var dataArray =[];
                        data.forEach(element => {
                            //console.log(element);
                            var obj = {};
                            var optionObj = {}; 
                            obj.id = element.id;
                            obj.name = element.name;
                            obj.alias = element.alias;
                            
                            optionObj.value = element.id;
                            optionObj.label = element.name;

                            prantArray.push(obj);
                            parentOptions.push(optionObj);

                            element.children.forEach((rows)=>{
                                var subObj = {};
                                subObj.id = rows.id;
                                subObj.name = rows.name;
                                subObj.alias = rows.alias;
                                subObj.pId = element.id;
                                subObj.pName = element.name;
                                subObj.pAlias = element.alias;
                                dataArray.push(subObj);
                            });
                        });

                        this.parentOptions = parentOptions;//一级类别数据
                        this.tableData = dataArray;//赋值 table 列表数据   
                        this.childData = dataArray ;
                        this.prantArray =prantArray;
                        // console.log(prantArray);
                    }else{
                        console.log(response.data.msg)  
                    }
                })
                .catch(error=>{
                    console.log(error); 
                });
        },
        //显示新增一级分类
        addFirstClassify(){
            this.addVisible = true;
            this.level1Name="";
            this.Level1Alias="";
        },
        //新增一级分类
        AddFirstSubmitClassify(){
            let _this = this ;
            
            if(this.level1Name == ''){
                //debugger;
                this.$notify.info({title: '提示',message: '请输入分类名称'});
                return false;   
            }
            if(this.Level1Alias == ''){
                this.$notify.info({title: '提示',message: '请输入分类别名'});
                return false;
            }
          
            const querystring = require('querystring');
            const param ={
                pid:0,
                name: this.level1Name,
                alias: this.Level1Alias          
            }
            this.$axios.post('/manage/item/addCategory',querystring.stringify(param))
            .then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，新增一级分类成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        _this.addVisible =false;
                        _this.getListData(); //刷新表格
                        },1500);
                    
                }else{
                    this.$notify.error({
                        title: '新增一级分类失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
        //显示编辑一级分类界面
        showFirstClassify(){
            this.new1Visible = true;
            this.level1Name="";
            this.Level1Alias="";
        },
        //修改一级分类
        editFirstClassify(){
            console.log(this.firstValue);
            let _this = this ;
            if(this.firstValue == ''){
                this.$notify.info({title: '提示',message: '请选择要修改的一级分类'});
                return false;    
            }
            if(this.level1Name == ''){
                //debugger;
                this.$notify.info({title: '提示',message: '请输入分类名称'});
                return false;   
            }
            if(this.Level1Alias == ''){
                this.$notify.info({title: '提示',message: '请输入分类别名'});
                return false;
            }
          
            const querystring = require('querystring');
            const param ={
                pid:0,
                id: this.firstValue,
                name: this.level1Name,
                alias: this.Level1Alias          
            }
            this.$axios.post('/manage/item/modifyCategory',querystring.stringify(param))
            .then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，修改一级分类成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        _this.new1Visible =false; 
                      
                        _this.getListData(); //刷新表格
                        },1500);
                    
                }else{
                    this.$notify.error({
                        title: '修改一级分类失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
        //删除一级分类
        delFirstClassifyBtn(){
            this.delFirstClassify = true;
        },
        //确定删除一级分类
        delFirstSubmitClassify(){
            if(this.firstValue>0){
                const querystring = require('querystring');
                const param ={
                    id:this.firstValue
                }
                this.$axios.post('/manage/item/deleteCategory',querystring.stringify(param)).then(response=>{
                    //console.log(response);
                    if(response.data.code==200){
                        this.tableData.splice(this.delIndex, 1);
                        this.$message.success('一级分类删除成功');
                        this.firstValue=="";
                        this.delFirstClassify = false;
                        this.getListData();
                    }else{
                        this.$notify.error({
                            title: '一级分类删除失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                    console.log(error); 
                });
            }
        },
        //显示新增二级分类界面
        showSecondClassify(){
            this.secondValue="";
            this.new2Visible = true;
        },
        //新增二级分类提交
        NewSecondClassify(){
            let _this = this ;
            if(this.level2Name == ''){
                this.$notify.info({title: '提示',message: '请输入类别名称'});
                return false;   
            }
            if(this.Level2Alias == ''){
                this.$notify.info({title: '提示',message: '请输入类别别名'});
                return false;
            }
            const querystring = require('querystring');
            const param ={
                pid: this.secondValue,//所属父级类别id
                name: this.level2Name,
                alias: this.Level2Alias          
            }
            this.$axios.post('/manage/item/addCategory',querystring.stringify(param))
            .then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，新增二级分类成功',
                        type: 'success'
                    });
                     setTimeout(function(){
                        _this.new2Visible =false; ; 
                        _this.level2Name = '';
                        _this.Level2Alias = '';
                        _this.getListData(); //刷新表格
                    },1500);
                    
                }else{
                    this.$notify.error({
                        title: '新增二级分类失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
        //显示编辑二级分类页面
        handleLook(index,row){
            this.subVisible = true;
            if(row.id &&row.id>0){
    
                this.childId = row.id;
                // console.log(row);
                // console.log(this.childData);

                    //将已有数据初始化
                for(let i = 0; i< this.childData.length;i++){

                    if(this.childData[i].id == this.childId){
                        this.level2Name = this.childData[i].name;
                        this.Level2Alias = this.childData[i].alias;
                        //默认选中一级分类
                        this.secondValue = row.pId;
                    }

                }
            }else{
                this.$message.error('获取用户ID失败:'+id);
            }
            // console.log(this.childOptions);
        },
        //提交二级分类修改
        EditSecondClassify(){
            
            let _this = this ;
            
            if(this.level2Name == ''){
                //debugger;
                this.$notify.info({title: '提示',message: '请输入分类名称'});
                return false;   
            }
            if(this.Level2Alias == ''){
                this.$notify.info({title: '提示',message: '请输入分类别名'});
                return false;
            }
          
            const querystring = require('querystring');
            const param ={
                pid:this.secondValue,
                id:  this.childId,
                name: this.level2Name,
                alias: this.Level2Alias          
            }
            this.$axios.post('/manage/item/modifyCategory',querystring.stringify(param))
            .then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，修改二级分类成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        _this.subVisible =false; 
                        _this.level2Name = '';
                        _this.Level2Alias = '';
                        _this.getListData(); //刷新表格
                    },1500);
                    
                }else{
                    this.$notify.error({
                        title: '修改二级分类失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
        //显示删除项目分类(二级)
        handleDelete (index,row){
            if(row.id && row.id>0){
                this.delVisible = true;
                this.delIndex = index;//当前要删除的下标
                this.delId = row.id;// 当前选中ID
                console.log(this.delId);
            }
        },
        //执行删除分类
        deleteRow (){
            var _this= this;
            //console.log("触发了确定");
            if(this.delId>0){
                const querystring = require('querystring');
                const param ={
                    id:this.delId
                }
                this.$axios.post('/manage/item/deleteCategory',querystring.stringify(param)).then(response=>{
                    //console.log(response);
                    if(response.data.code==200){
                        _this.tableData.splice(this.delIndex, 1);
                        _this.$message.success('删除成功');
                        _this.delVisible = false;

                        _this.getListData();
                        if(_this.type ==2){
                            _this.delVisible = false;
                        }
                        
                    }else{
                        _this.$notify.error({
                            title: '删除失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                    console.log(error); 
                });
            }
        },
        
         // 分页导航
        handleCurrentChange (val){
            // this.cur_page = val;
            // this.getListData();
        },
    }  
}
</script>
<style lang="stylus" scoped>
    .handle-box{
        margin-bottom :20px;
        .handle-box-1{
            margin-bottom :15px;
            .handle-input {
                width: 250px;
                display: inline-block;
                margin-right :30px;
            }
            .handle-date{
                margin-right :30px;
            }
        }
        .handle-box-2{
            .handle-select{
                width :135px;
                margin-right :30px;
            }
        }
       
    }
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
</style>
